<template>
	<div class="sort-chart-box">
		<div id="sortChart" ref="sortChartRef"></div>
	</div>
</template>

<script setup>
import echarts from "@/common/utils/echarts.js";
import { changeNumToWan } from "../../utils/handelScreen";
const calc = (v = []) => {
	//  排序
	// let allData = [
	//   {
	//     name: "TOP1",
	//     value: changeNumToWan(v.package || 0),
	//     title: "套餐销售额",
	//     color: ["#10274B", "#1978E5"],
	//     textColor: "#00D5FF",
	//     borderColor: ["#00D5FF", "#1978E5"],
	//   },
	//   {
	//     name: "TOP2",
	//     value: changeNumToWan(v.pastry  || 0),
	//     title: "面点销售额",
	//     color: ["rgba(0, 213, 255, 0.6)", "rgba(25, 120, 229, 0.6)"],
	//     textColor: "#30DCFE",
	//     borderColor: ["rgba(0, 213, 255, 0.6)", "rgba(25, 120, 229, 0.6)"],
	//   },
	//   {
	//     name: "TOP3",
	//     value: changeNumToWan(v.other || 0),
	//     title: "其他销售额",
	//     color: ["#79551A", "#FDD537"],
	//     textColor: "#FDD537",
	//     borderColor: ["#79551A", "#FDD537"],
	//   },
	// ];
	// let yArr = allData.map((item) => {
	//   return {
	//     value: item.value,
	//     name: item.title,
	//     itemStyle: {
	//       color: {
	//         x: 0, //右
	//         y: 0, //下
	//         x2: 1, //左
	//         y2: 0, //上
	//         colorStops: [
	//           {
	//             offset: 0,
	//             color: item.color[0],
	//           },
	//           {
	//             offset: 1,
	//             color: item.color[1],
	//           },
	//         ],
	//       },
	//     },
	//     label: {
	//       borderColor: {
	//         x: 0, //右
	//         y: 0, //下
	//         x2: 0, //左
	//         y2: 1, //上
	//         colorStops: [
	//           {
	//             offset: 0,
	//             color: item.borderColor[0],
	//           },
	//           {
	//             offset: 1,
	//             color: item.borderColor[1],
	//           },
	//         ],
	//       },
	//     },
	//   };
	// });
	// yArr.reverse();
	// let yArr2 = allData.map((item) => {
	//   return {
	//     value: item.value,
	//     name: item.title,
	//     label: {
	//       color: item.textColor,
	//     },
	//   };
	// });
	// yArr2.reverse();
	// let titleArr = allData.map(({title}) =>title);
	// titleArr.reverse();
	// let options = {
	//   grid: {
	//     top: "10%", //grid 组件离容器的距离
	//     right: "25%",
	//     bottom: "10%",
	//   },
	//   xAxis: {
	//     type: "value",
	//     name: "单位（万元）",
	//     nameTextStyle: {
	//       color: "#D3E3FF",
	//     },
	//     position: "top",
	//     //刻度
	//     axisTick: {
	//       show: false,
	//     },
	//     // 轴线
	//     axisLine: {
	//       show: false,
	//     },
	//     // 刻度标签
	//     axisLabel: {
	//       show: false,
	//     },
	//     splitLine: {
	//       show: false,
	//     },
	//   },
	//   yAxis: [
	//     {
	//       type: "category",
	//       axisTick: {
	//         show: false,
	//       },
	//       axisLabel: {
	//         interval: 0,
	//         show: false,
	//       },
	//       axisLine: {
	//         lineStyle: {
	//           color: {
	//             x: 0,
	//             y: 0,
	//             x2: 0,
	//             y2: 1,
	//             colorStops: [
	//               {
	//                 offset: 0,
	//                 color: "#1976E1", // 0% 处的颜色
	//               },
	//               {
	//                 offset: 0.5,
	//                 color: "#73D9FF", // 50% 处的颜色
	//               },
	//               {
	//                 offset: 1,
	//                 color: "#F9D136", // 100% 处的颜色
	//               },
	//             ],
	//           },
	//         },
	//       },
	//     },
	//   ],
	//   series: [
	//     {
	//       data: yArr2,
	//       type: "bar",
	//       barGap: "-100%",
	//       barWidth: 8,
	//       itemStyle: {
	//         color: "transparent",
	//       },
	//       label: {
	//         show: true,
	//         position: ["95%", "-180%"],
	//       },
	//     },
	//     {
	//       data: yArr,
	//       type: "bar",
	//       barWidth: 8,
	//       label: {
	//         show: true,
	//         position: ["3%", "-50%"],
	//         color: "#D8F0FF",
	//         align: "left",
	//         verticalAlign: "bottom",
	//         formatter: (params) => {
	//           return params.name;
	//         },
	//         padding: [5, 10, 3, 10],
	//         borderWidth: 1,
	//       },
	//     },
	//   ],
	// };

	let legendArr = [
		{
			name: "套餐销售额",
			textStyle: {
				color: "#D3E3FF",
			},
			itemStyle: {
				opacity: 0,
			},
			lineStyle: {
				type: "solid",
				color: "#1978E5",
				width: 2,
			},
		},
		{
			name: "面点销售额",
			textStyle: {
				color: "#D3E3FF",
			},
			itemStyle: {
				opacity: 0,
			},
			lineStyle: {
				type: "solid",
				color: "#30DDFF",
				width: 2,
			},
		},
		{
			name: "其他销售额",
			textStyle: {
				color: "#D3E3FF",
			},
			itemStyle: {
				opacity: 0,
			},
			lineStyle: {
				type: "solid",
				color: "#FFD737",
				width: 2,
			},
		},
	]; // 图例名称
	let xArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; // X轴月份
	let yArr = {
		package: new Array(12).fill(0),
		pastry: new Array(12).fill(0),
		other: new Array(12).fill(0),
	}; //  Y轴数据
	v.map((item) => {
		let month = "";
		if (item.month.length == 2 && item.month[0] == 0) {
			month = item.month[1];
		} else {
			month = item.month;
		}
		yArr.package[month - 1] = changeNumToWan(item.package || 0);
		yArr.pastry[month - 1] = changeNumToWan(item.pastry || 0);
		yArr.other[month - 1] = changeNumToWan(item.other || 0);
	});
	let options = {
		grid: {
			right: "18%",
			left: "12%",
			bottom: "15%",
		},
		legend: {
			data: legendArr,
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "line",
				lineStyle: {
					type: "solid",
					width: 30,
					color: "rgba(216,240,255,0.1)",
				},
			},
			backgroundColor: "rgba(216,240,255,0.1)",
			// padding: [3, 12, 3, 12],
			borderWidth: 1,
			borderColor: "#6E7A83",
			formatter: (params) => {
				// console.log(params);
				let res = "";
				for (let i = 0; i < params.length; i++) {
					res += `<span style="color:${legendArr[i].lineStyle.color};">${params[i].seriesName}：${params[i].value}万元</span><br/>`;
				}
				return res;
			},
		},
		xAxis: {
			type: "category",
			name: "单位（月）",
			nameTextStyle: {
				color: "#D3E3FF",
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				// show: true,
				color: "rgba(176,215,255,0.4)",
			},
			axisLabel: {
				color: "#D3E3FF",
				interval: 0,
			},
			data: xArr,
		},
		yAxis: [
			{
				type: "value",
				name: "单位（万元）",
				nameTextStyle: {
					color: "#D3E3FF",
				},
				axisLabel: {
					color: "#D3E3FF",
				},
				splitLine: {
					lineStyle: {
						color: "rgba(176,215,255,0.25)",
						type: "dashed",
					},
				},
			},
		],
		series: [
			{
				type: "line",
				name: "套餐销售额",
				data: yArr.package,
				itemStyle: {
					color: "#1978E5",
				},
			},
			{
				type: "line",
				name: "面点销售额",
				data: yArr.pastry,
				itemStyle: {
					color: "#30DDFF",
				},
			},
			{
				type: "line",
				name: "其他销售额",
				data: yArr.other,
				itemStyle: {
					color: "#FFD737",
				},
			},
		],
	};
	return options;
};
let sortChart = null;
let initSortChartData = (v = {}) => {
	sortChart.setOption(calc(v));
};
const initChart = (v) => {
	// 初始化echarts实例
	if (!sortChart)
		sortChart = echarts.init(document.getElementById("sortChart"));
	initSortChartData(v);
};
defineExpose({
	initChart,
});
</script>
<style lang="scss" scoped>
.sort-chart-box {
	width: 100%;
	height: 100%;
	#sortChart {
		width: 100%;
		height: 100%;
	}
}
</style>
